import React from 'react'
import './css/grade.less';
// adminMain下的第一个模块：级别

class Grade extends React.Component {  
    //对于柱形图的数量，等级，做了判断。
    getLevelLength(){
        if(this.props.level.totalLevel){
            let str = [];
            let heightInfo = -40;
            // for(let i=0;i<this.props.level.totalLevel;i++){
            for(let i=0;i<6;i++){
                heightInfo +=30;
                const index =  this.props.level.level<6?i:(this.props.level.level<11?i+6:i+9);
                    str.push(
                        <div className="grade-border col-xs-2" key={this.props.level.id+i} style={{padding:0}}>
                                <div style={{bottom:i<2?4+i*15+38:heightInfo+38+'px'}} className={index!==Number(this.props.level.level)?'grade-show img-cicle':'img-cicle'}>
                                    {
                                    this.props.level.isTest?
                                        <img style={{width:"100%",height:"100%",maxWidth:"90px"}}  src={require('../../images/main/grade.png')} alt=''/>:
                                        <img style={{width:"100%",height:"100%",maxWidth:"50px"}}  src={require('../../images/main/grade.png')} alt=''/>                                    
                                    }
                                    </div>
                                <div className={`grade-level ${index===Number(this.props.level.level)?'grade-levelColor':''}`} style={{height:i<2?4+i*15:heightInfo+'px',marginLeft:"10%"}}>
                                </div>
                                <p style={{color:"#B4C5C8"}}>Lv {index}</p>
                        </div>
                    )
            }
            return str;
        }
    }
    render (){
        return (
            <div className="user-info user-body">
                <div className="grade-left">
                    {
                        this.props.level.isTest?
                            <div className="PLeft">
                                <p>恭喜您的孩子完成了新单元学习，现在您可以让孩子进行单元测试</p>
                                <div className="btn-text" style={{textAlign:"center"}}>
                                    <a onClick={()=>{
                                        this.props.hrefInfo('/levelTest/')
                                    }}>开始测试</a>
                                </div>
                            </div>:
                            <div className="PLeft">
                            <p>当前水平测试结果为：</p>
                                <div>
                                    <i>Level  {this.props.level.level||0}</i>
                                </div>
                            </div>
                    }
                </div>
                <div className="grade-right">
                    <div className="grade-center col-xs-12" style={{height:this.props.level.isTest?'152px':'180px'}}>
                        {
                            this.getLevelLength()
                        }    
                    </div>
                </div>
            </div>
        )
    }
}
export default Grade